<!DOCTYPE html>
<html lang="en">
	<head>
<%--    	<meta name="layout" content="main_mobile">--%>
        <title>项目反馈</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable=no">
    
		
		<link rel="stylesheet" href="${resource(dir: 'frozen/css', file: 'frozen.css')}" type="text/css">
		<link rel="stylesheet" href="${resource(dir: 'css', file: 'default.css')}" type="text/css">
		
		<script type="text/javascript" src="${resource(dir: '/frozen/js', file: 'zepto.min.js')}" ></script>
		<script type="text/javascript" src="${resource(dir: '/frozen/js', file: 'frozen.js')}" ></script>
        <script src="${resource(dir: 'js', file: 'util_mobile.js')}" type="text/javascript"></script>         
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'project_progress.css')}" type="text/css">
        <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
        <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
    </head>
<body>

	<g:form id="feedBackForm" url="[resource:projectFeedbackInstance, action:'projectFeedbackSave']" method="post" class="form-common">
	<div class="form">
	
        <footer class="ui-footer ui-footer-stable ui-border-t">
            <div class="ui-footer-btns">
                <button type="button" class=" btn-footer btn-red" onclick="check()">发布</button>
            </div>
        </footer>

        <input type="hidden" name="project" value="${project.id}">
        <div class="ui-container">
            <div class="form-common">
                <div class="textarea-big">
                    <textarea placeholder="分享最新的进展" maxLenght="3" name="text" id='text'></textarea>
                    <span class="count"><i>0</i>/<span class="max">500</span></span>
                </div>
                <div class="form-imgs" data-index="1" data-max-length="8">
                    <div class="img-box">
                        <b class="close"><img src="${resource(dir:'images',file:'icon-fork-white.png')}" alt=""></b>
                        <input type="file" name="1img1" id="img1">
                        <input type="hidden" name="img1">
                    </div>
                </div>
                <p class="txt">最多上传8张照片</p>
            </div>

        </div>
    </div>
    </g:form>

	<script type="text/javascript">
	var MAX_WORDS = 500; // 最多可输入的字符长度
    (function() {
        $('.form-imgs').on('click', '.img-box .close', function(){
            $(this).parents('.img-box').remove();
        })
        $('.form-imgs').on('change', '.img-box:last-child input[type=file]', function(){
        	var files = [$('.form-imgs .img-box:last-child input[type=file]').attr('id')]
     			$.ajaxFileUpload({  
        			url:'/scfire/project/imgSaveMb',  
        			secureuri:false,  
        			dataType:'text',
        			fileElementId:files,//file标签的id 
        			success: function (data, status) { 
		           	if(data=='large'){
		           		showWarn('图片过大')
		           		return
		           	}
		       		if(data=='format'){
		           		showWarn('图片格式不对')
		           		return
		           	}
	               //把图片替换  
	               if(data=='fail'){
	               	showWarn('上传失败')
	               }else{
	            	   //图片预览
	                   var imageurl = "/scfire/project/imgRead?img="+data;
	                   addNewImgPreview(imageurl, data);
	                   //图文内容传给后台
	                   var imgs = $('.form-imgs');
	                   var index = parseInt(imgs.attr('data-index'));
	                   index++;                   
	                   var html = "<div class='img-box'><b class='close'><img src='../images/icon-fork-white.png' alt=''></b><input type='file' name='1img" + (index) + "' id='img" + (index) + "'><input type='hidden' name='img" + (index) + "'/></div></div>";
	                   imgs.attr('data-index', index).append(html);		                            
	               }
		           },  
		           error: function (data, status, e) {  
		        	   alert('上传失败');
		           }
		       	 });
        });
        

        $('.textarea-big .count .max').text(MAX_WORDS);
        $('.textarea-big textarea').keyup(function(e){
            if ($(this).val().length >= MAX_WORDS) {
                //$(this).val($(this).val().substr(0, MAX_WORDS));
            	$('.textarea-big .count i').css("color","red");
            }else{
            	$('.textarea-big .count i').css("color","#757575");
                }
            $('.textarea-big .count i').text($(this).val().length)
        });

    })();



    function addNewImgPreview (url, data) {
        var imgs = $('.form-imgs');
        imgs.find('.img-box:last-child').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(data);       
    }
	
    function addPhotoPreview (imgs, url) {
        var max = parseInt(imgs.attr('data-max-length'));
        if (max < imgs.find('.img-box').length) {
            imgs.find('.img-box').eq(max - 1).css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
        } else {
            imgs.find('.img-box:last-child').css('background-image', 'url(' + url + ')').find('input[type=hidden]').val(url);
            var index = parseInt(imgs.attr('data-index'));
            index++;
            var html = '<div class="img-box"><b class="close"><img src="../images/icon-fork-white.png" alt=""></b><input type="file"  name="img' +(index)+ '" id="img' +(index)+ '"><input type="hidden" name="img' +(index)+ '"></div>';

            imgs.attr('data-index', index).append(html);
        }
    }
    function check(){
		var form = $("#feedBackForm");
		var text = $("#text").val().trim();
		if(text == ""){
			alert("反馈进展不能为空");
			return;
		}
		if(text.length>500){
			alert("反馈进展最多500字");
			return;
			}
		form.submit();
    }
	</script>
	</script>

</body>
</html>